
<template>
    <div class="blogContent-main">
         <div class="life">
              <p>欢迎来访  Mr Huang</p>
                <img src="../assets/images/life.png">
             </div>

            <div class="blogContent-item">
               <ul>
                   
                   <li v-for= "item in blogAriticleItem" :id="item._id">
                      <router-link :to="{path:'blogType/blogTypeList/'+item._id}">
                       <div class="imgTitle">
                            <p>{{item.blogType}}</p>
                            <img :src="item.coverImg">
                       </div>
                       <div class="item-text">
                            <p>{{item.blogTitle}}</p>
                            <div class="item-content" v-html="item.blogText">
                              
                            </div>
                            <div class="textBottom">
                               <span class="textTime">{{item.time}}</span>
                               <span class="watchNum"><img src="../assets/images/watch.png">{{item.watchNum}}</span>
                            </div>
                       </div>
                      </router-link>
                   </li>
               </ul>
            </div>

            <div class="list-p">
               <ul>
                  <li>
                    <img src="https://cuijiahua.com/wp-content/themes/begin/thumbnail.php?src=https://cuijiahua.com/wp-content/uploads/2018/03/spider_5_tese.png&w=280&h=210&a=&zc=1">
                    <p>爬虫进阶教程：抖音APP无水印视频批量下载</p>
                  </li>
                  <li>
                    <img src="https://cuijiahua.com/wp-content/themes/begin/thumbnail.php?src=https://cuijiahua.com/wp-content/uploads/2018/03/spider_5_tese.png&w=280&h=210&a=&zc=1">
                    <p>爬虫进阶教程：抖音APP无水印视频批量下载</p>
                  </li>
                  <li>
                    <img src="https://cuijiahua.com/wp-content/themes/begin/thumbnail.php?src=https://cuijiahua.com/wp-content/uploads/2018/03/spider_5_tese.png&w=280&h=210&a=&zc=1">
                    <p>爬虫进阶教程：抖音APP无水印视频批量下载</p>
                  </li>
                  <li>
                    <img src="https://cuijiahua.com/wp-content/themes/begin/thumbnail.php?src=https://cuijiahua.com/wp-content/uploads/2018/03/spider_5_tese.png&w=280&h=210&a=&zc=1">
                    <p>爬虫进阶教程：抖音APP无水印视频批量下载</p>
                  </li>
    
               </ul>
            </div>
       </div>  
</template>

<style scoped>
  .blogContent-item a{
    display: block;
    text-decoration: none;
  }
  .item-text>p:hover{
    color: #3690cf;
  }
  .list-p ul{
     display: flex;
     margin-right: -1%

  }
  .list-p ul li{

    width: 24%;
    margin-right: 1%;
    list-style-type: none;
    border-radius: 4px;
    font-weight: bold;
    color: #444;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #fff;
     box-shadow: 0 1px 1px rgba(0,0,0,.04);
  }
  .list-p ul li p{
    padding: 6px 10px 10px 10px;
    white-space: nowrap;
    width: 86%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list-p ul li img{
    width: 100%
  }
	.blogContent{
		width: 1120px;
    margin:20px auto;
    display: flex;
	}
  .blogContent-main{
    width: 70%;
  }
  .life{
    position: relative;
  }
  .life p{
    position: absolute;
    left: 0;
    top: 0;
    background: #4ba5d8;
    color: white;
    padding: 8px 15px;
    font-size: 14px
  }
  .life img{
    border-radius: 4px;
    width: 100%;
    cursor: pointer;
  }
  .blogContent-item{
    margin-top: 20px
  }
  .blogContent-item li{
    cursor: pointer;
    position: relative;
    background: #fff;
    margin: 0 0 10px 0;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border-radius: 4px;
    list-style-type: none;
    height: 152px;
  }
  .imgTitle{
    position: absolute;
    width: 200px;
    height: 150px;
    line-height: 150px;
    overflow: hidden;
  }
  .imgTitle p{
    position: absolute;
    color: #fff;
    line-height: 28px;
    padding: 0 10px;
    background: #4ba5d8;
  }
  .imgTitle img{
    width: 200px;
    cursor: pointer;
    border-radius: 4px
  }
  .item-text{
    margin-left: 220px
  }
  .item-text p{
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: #555;
  }
  .item-content{
    text-align: left;
    margin-top: 12px;
    line-height: 24px;
    color: #777;
    height: 76px;
    overflow: hidden;
  }
  .textBottom{
    margin-top: 20px;
    text-align: left;
    color: #999
  }
  .watchNum img{
    width: 18px;
    vertical-align: middle;
    margin:0 4px 0 10px;
  }
</style>
<script type="text/javascript">
    export default {
       data () {
          return {
             blogAriticleItem: []
          }
       },
       created(){
          this.initArticleItem();
       },
       methods:{
          initArticleItem() {
                this.$http({
                       method: "get", 
                       url: this.url +'/articles/articlesIndex',
                })
                 .then(res => {
                     if(res.data.code == 200){
                          this.blogAriticleItem = res.data.result;
                     }

                })
          }
       }
    }
</script>